<template>
	<view class="uploadimg">
		<view class="uploadimg-wrap">
			<view class="paytype-tab">
				<view @click="changepaytype(1)" :class="paytypeindex == 1 ?'zfbpay active':'zfbpay'">
					支付宝
					<view class="sj"></view>
				</view>
				<view @click="changepaytype(2)" :class="paytypeindex == 2 ?'wxpay active':'wxpay'">
					微信
					<view class="sj"></view>
				</view>

			</view>
			<view class="paytype-info">
				<view class="input-item" v-if="paytypeindex == 1">
					<text class="tit">支付宝账号</text>
					<input type="text" :value="zfbaccount" placeholder="请输入支付宝账号" data-key="zfbaccount" @input="inputChange" />
				</view>
				<view class="input-item" v-if="paytypeindex == 1">
					<text class="tit">真实姓名</text>
					<input type="text" :value="name" placeholder="请输入真实姓名" data-key="name" @input="inputChange" />
				</view>
				<view class="upload" v-if="paytypeindex == 1">
					<text class="tit">支付宝收款码</text>
					<!--   -->
					<view class="uploadbtn" @click="editcode">
						<!-- <input class="uplo" type="file" accept="image/*" id='positive' @change="uploadFile('positive',$event)"> -->
						<image class="addqrcode" v-show="!qrcode" src="../../static/images/upload-btn.png"></image>
						<image class="qrcode" v-show="qrcode" :src="qrcode"></image>
					</view>
				</view>
				<!-- <view class="input-item" v-if="paytypeindex == 2">
					<text class="tit">微信昵称</text>
					<input type="text" :value="wxname" placeholder="请输入微信昵称" data-key="wxname" @input="inputChange" />
				</view> -->
				<view class="input-item" v-if="paytypeindex == 2">
					<text class="tit">微信账号</text>
					<input type="text" :value="wxaccount" placeholder="请输入微信账号" data-key="wxaccount" @input="inputChange" />
				</view>
				<view class="input-item" v-if="paytypeindex == 2">
					<text class="tit">真实姓名</text>
					<input type="text" :value="name" placeholder="请输入真实姓名" data-key="name" @input="inputChange" />
				</view>
				<view class="upload" v-if="paytypeindex == 2">
					<text class="tit">微信收款码</text>
					<view class="uploadbtn" @click="editcode">
						<!-- <input :class="qrcode?'upload_b':'uplo'" type="file" accept="image/*" id='positive' @change="uploadFile('positive',$event)"> -->
						<image class="addqrcode" v-show="!qrcode" src="../../static/images/upload-btn.png"></image>
						<image class="qrcode" v-show="qrcode" :src="qrcode"></image>
					</view>
				</view>
			</view>
			<view class="confirmbtn" @click="confirmuploadbtn">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				zfbaccount: '',
				paytypeindex: 1,
				wxname: '',
				wxaccount: '',
				qrcode: '',
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getimginfo()
		},
		methods: {
			// uploadFile(type, e) {
			// 	let file = e.target;
			// 	let that = this;
			// 	that.qrcode = file.files[0];
			// 	console.log(file)
			// 	let reader = new FileReader();
			// 	reader.onload = function(evt) {
			// 		that[type].base64 = evt.target.result;
			// 		document.getElementById(type).value = "";
			// 	};
			// 	// reader.readAsDataURL(file.files[0]);
			// },
			getimginfo() {
				let that = this;
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/get_payinfo',
					data: {
						pay_type: that.paytypeindex == 1 ? 2 : 1,
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(res => {
					if (res[1].data.status == 1) {
						if (that.paytypeindex == 1) {
							this.zfbaccount = res[1].data.data[0].account;
						} else {
							this.wxaccount = res[1].data.data[0].account;
						}
						this.qrcode = res[1].data.data[0].eqcode;
						this.name = res[1].data.data[0].uname
						that.$api.msg(res[1].data.msg)
						that.id = res[1].data.data[0].id
					}
				})

			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			changepaytype(index) {
				this.paytypeindex = index;
				this.zfbaccount = '';
				this.name = '';
				this.wxname = '';
				this.wxaccount = '';
				this.qrcode = '';
				this.getimginfo()
			},
			confirmuploadbtn() {
				let that = this;
				uni.request({
					url: 'https://www.ggshop1688.com/api/transaction/bindpayinfo',
					data: {
						id: that.id,
						paytype: that.paytypeindex == 1 ? 2 : 1,
						account: that.paytypeindex == 1 ? that.zfbaccount : that.wxaccount,
						eqcodeurl: that.qrcode,
						uname: that.name
					},
					method: 'POST',
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					console.log(data)
					if (data[1].data.status == 1) {
						that.$api.msg(data[1].data.msg)
					}else{
						that.$api.msg(data[1].data.msg)
					}
					// setTimeout(()=>{
					// 	uni.navigateTo({
					// 		url:'/subPackage/selecetpublish/selecetpublish'
					// 	})
					// })
				})
			},
			editcode() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						uni.showLoading({
						    title: '加载中'
						});
						let file = res.tempFilePaths[0]
						console.log(res)
						this.$Request.upload({
							url: '/api/Usercentinfo/editPhoto',
							filePath: file,
							formData: null,
							name: 'headPic',
							success: function(res) {
								uni.hideLoading()
								let data = JSON.parse(res.data)
								that.qrcode = data.fullPath
								console.log(that.qrcode)
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uploadimg {
		font-size: 15px;

		.paytype-tab {
			display: flex;
			background-color: #ED5B25;
			height: 80upx;
			line-height: 80upx;
			align-items: center;
			justify-content: space-around;
			color: #fff;
			color: #F5AD92;

			.active {
				color: #fff;
				position: relative;

				.sj {
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 10px;
					border-color: transparent transparent #fff;
					position: absolute;
					width: 10px;
					bottom: 0;
					transform: translateX(-50%);
					left: 50%;
					height: 10px;
				}
			}

			.zfbpay,
			.wxpay {
				flex: 1;
				text-align: center;
			}
		}

		.paytype-info {
			padding: 30upx;

			.input-item {
				border-bottom: 1px solid #aeaeae;
				padding-bottom: 20upx;
				margin-bottom: 50upx;

				.tit {
					margin-bottom: 20upx;
					display: inline-block;
				}
			}

			.upload {
				.tit {
					margin-bottom: 20upx;
					display: inline-block;
				}

				.uploadbtn {
					display: flex;

					.uplo {
						position: absolute;
						width: 90px;
						height: 90px;
						margin-right: 10px;
					}

					.upload_b {
						position: absolute;
						width: 100%;
						height: 800px;
					}

					.qrcode {
						width: 100%;
						height: 800px;
						margin: 0 auto;
					}

					.addqrcode {
						width: 180upx;
						height: 180upx;
						margin-right: 10px;

						imaeg {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.confirmbtn {
			position: fixed;
			bottom: 5%;
			width: 450upx;
			height: 70upx;
			line-height: 70upx;
			text-align: center;
			font-size: 26upx;
			margin: 0 auto;
			transform: translateX(-50%);
			left: 50%;
			color: #fff;
			background-color: #FF6600;
		}
	}
</style>
